<template>
    <div>
        <div style="margin-bottom: 10px;">
            <span style="margin-right: 10px;">时间</span>
            <Input v-model="system_log_data.log_time" style="width: 200px;margin-right: 10px;"></Input>
            <span style="margin-right: 10px;">搜索内容</span>
            <Input v-model="system_log_data.search" style="width: 200px;margin-right: 10px;"></Input>
            <Button type="primary" @click="handleSystemLogsSearch" style="margin-right: 15px;">搜索</Button>
            <Button @click="handleClearSystemLogsSearch">重置</Button>
        </div>
        <Table :columns="system_log_data.columns" :data="system_log_data.data" border stripe></Table>
        <Page :total="system_log_data.page_total" size="small" show-elevator show-sizer show-total style="margin-top: 10px;" @on-change="handleSystemLogPageChange" @on-page-size-change="handleSystemLogPageSizeChange" />
    </div>
</template>

<script>
export default {
    name: "SystemLogsView",
    data() {
        return {
            system_log_data: {
                log_time: '',
                search: '',
                columns: [
                    { title: 'ID', key: 'log_id', width: 100, align: 'center' },
                    { title: '时间', key: 'log_time', width: 200, align: 'center' },
                    { title: '内容', key: 'log_content' }
                ],
                page_total: 40,
                page_size: 10,
                page_current: 1,
                data: []
            },
        }
    },
    methods: {
        handleSystemLogsSearch() {
            this.system_log_data.page_current = 1;
            this.handleGetSystemLogs();
        },
        handleClearSystemLogsSearch() {
            this.system_log_data.search = '';
            this.system_log_data.log_time = '';
            this.system_log_data.page_current = 1;
            this.handleGetSystemLogs();
        },
        handleSystemLogPageChange(page_current) {
            this.system_log_data.page_current = page_current;
            this.handleGetSystemLogs();
        },
        handleSystemLogPageSizeChange(page_size) {
            this.system_log_data.page_size = page_size;
            this.system_log_data.page_current = 1;
            this.handleGetSystemLogs();
        },
        handleGetSystemLogs() {
            var url = '/get_system_logs?page_size=' + this.system_log_data.page_size + '&page_current=' + this.system_log_data.page_current;
            if (this.system_log_data.log_time) {
                url += '&log_time=' + encodeURIComponent(this.system_log_data.log_time);
            }
            if (this.system_log_data.search) {
                url += '&search=' + encodeURIComponent(this.system_log_data.search);
            }
            this.$http.get(url).then(res => {
                this.system_log_data.page_total = res.page_total;
                this.system_log_data.data = res.data;
            });
        },
    },
    created() {
        this.handleGetSystemLogs();
    }
}
</script>